
import { useModel, useRequest } from '@umijs/max';
import { Card, theme,Row,Col,Form,Input,Checkbox,Radio,DatePicker, Tree, Button, Space, Select, message} from 'antd';
import React, { useRef, useState } from 'react';
import {TreeCategory} from '@/components/userDefine/MaterialCategoryTree';
import { getCommTreeByXid, getOrgTreeByXid, s_getBusinessCategoryInfo, s_getCategoryInfo, s_getMaterialCategoryTree, s_saveBusinessCategory, s_saveMaterialCategory } from '@/services/basis';
import dayjs from 'dayjs';
import { ProCard, ProForm, ProFormDatePicker, ProFormInstance, ProFormRadio, ProFormText } from '@ant-design/pro-components';
import moment from 'moment';
 
function CategoryTree({tdata,getTreeInfo}){
  return(
    <Tree treeData={tdata}  
     defaultExpandAll={true} blockNode={true}
          onClick={(e,node)=>{getTreeInfo(node);}}/>
  );
}

const Welcome: React.FC = () => {
   const [treeData,setTreeData]=useState();//客商分类树的值
   const [selectedNode,setSelectedNode]=useState<{key:any,title:any,children:any[]}>();//当前选中的树节点
   const [etype,setEtype]=useState(0);//操作类型，1新增，0修改

   const mform_ref=useRef<ProFormInstance>();

  // useRequest(()=>getOrgTreeByXid({x_id:1}),{
    //此处创建一个生成树的通用方法，通过传入表名和X_ID值
    useRequest(()=>getCommTreeByXid({x_id:1,source_table:'business_category'}),{  
    onSuccess:(data)=>setTreeData(data),
  });
 
  //单击树节点的处理函数
   async function getTreeInfo(tnode:any){
     setEtype(0);
     setSelectedNode(tnode);  //获取了当前选中的客商分类节点
     const fdata=await s_getBusinessCategoryInfo({id:tnode?.key});
     const y=fdata.data[0];
     mform_ref.current?.setFieldsValue({higher_code:y.higher_code,higher_name:y.higher_name,code:y.code,name:y.name,
                                       status:y.status,operater_code:y.operater_code,
                                       operate_time:moment(y.operate_time).toDate(),
                                      });
     }

     //添加客商分类
     async function addCategory(){
         if(selectedNode===undefined)
             message.warning('请先选择所属的上级分类。')
         else{
           setEtype(1);
           const higher_code= mform_ref.current?.getFieldValue('code');
           const higher_name=mform_ref.current?.getFieldValue('name');
           mform_ref.current?.resetFields();
           mform_ref.current?.setFieldsValue({higher_code:higher_code,status:1,
                              higher_name:higher_name,operate_time:moment().toDate()});
         }
     }

     //保存新增的分类
     async function saveCategory(){
      if(selectedNode===undefined)
          message.warning('请先选择要新增或保存的类别。');
      else{
        const fdata0=mform_ref.current?.getFieldsValue();
        //在新增或修改时，上级ID和ID都设为当前选中的节点，分别用于插入和更新的条件
        const fdata={...fdata0,higher_id:selectedNode?.key,id:selectedNode?.key,
                   operate_time:moment(moment(fdata0.operate_time).toDate()).format('YYYY-MM-DD HH:mm:ss'),};
       
        const x=await s_saveBusinessCategory({x_id:1,operater_id:1,etype,fdata});
        if(x.success){
           message.success('数据保存成功。');
           setEtype(0);
           //更新树
           setTreeData(x.data);
        }
        else 
           message.error('数据保存失败，请检查。');
      }
     }

  return<>
     <Row gutter={10}>
     <Col  span={6}>
     <Card title='客商分类' style={{height:800}}>
        <CategoryTree tdata={treeData} getTreeInfo={getTreeInfo}/>
     </Card>
          
     </Col>
     <Col  span={18}>
      <Card title='客商分类信息' style={{height:800}}
      extra={<Space size='large'>
        <Button onClick={()=>addCategory()}>新增分类</Button>
        <Button onClick={()=>saveCategory()}>保存分类</Button></Space>}
      >
      <ProForm name='mform' formRef={mform_ref} style={{marginLeft:29}}
         submitter={{
          resetButtonProps:{style:{display:'none'}},
          submitButtonProps:{style:{display:'none'}},
         }}
       >
          <ProFormText name='higher_code' label='上级分类名称' disabled={true}  width={300}/>
          <ProFormText name='higher_name' label='上级分类名称'  disabled={true}  width={300}/>
          <ProFormText name='code' label='分类编码'   width={300}/>
          <ProFormText name='name' label='分类名称'   width={300}/>
           <ProFormDatePicker name='operate_time' label='操作日期'   width={300}/>
          <ProFormRadio.Group name='status' label='状态'    width={300}
            options={[{value:1,label:'启用'},{value:2,label:'停用'},{value:3,label:'删除'}]}
          />
          <ProFormText name='operater_code' label='操作人'   width={300}/>
       
       </ProForm>
       </Card>
      </Col>
     </Row>
  </>
};

export default Welcome;
